import React,{useState} from 'react'
import './cusAnalysis.css'
import CusType from './CusType'
import CusSource from './CusSource'
import CusWorkType from './CusWorkType'
import CusProvince from './CusProvince'
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;

  // 时间处理
  let dataNow = new Date().toLocaleDateString().replace(/\//g,',');
  let fifthdata = new Date(dataNow)
  fifthdata.setDate(fifthdata.getDate()-15);
  let dataStart = fifthdata.getFullYear()+"-"+Number(fifthdata.getMonth()+1)+"-"+fifthdata.getDate()
  let dataEndFormData = dataNow.replace(/,/g,'-')

export default function Index() {

  const [endDataNum,setEndDataNum] = useState(dataEndFormData)
  const [startDataNum,setStartDataNum] = useState(dataStart)

  const [time1,settime1] = useState(startDataNum)
  const [time2,settime2] = useState(endDataNum)
  const onChange = (time,timeString) => {
    settime1(timeString[0])
    settime2(timeString[1])
  };
  const setDate = () => {
    setStartDataNum(time1)
    setEndDataNum(time2)
  }

  return (
    <div id='cusAnalysis'>
      
      <div className='cusDate'>
        <div >按日期查看</div>
        <div>
          <Space direction="vertical" size={12}>
            <RangePicker onChange={onChange}/>      
          </Space>
        </div>
        <div>
          <div className='search' onClick={setDate}>立即查看</div>
        </div>
        <div className='endData'>
          统计日期&nbsp;
          <div>{startDataNum}</div>至&nbsp;
          <div>{endDataNum}</div>
        </div>
      </div>


      <div className='chartsContent'>
        <div className='chartsBox'>
          <CusType/>
        </div>
        <div className='chartsBox'>
          <CusSource/>
        </div>
        <div className='chartsBox'>
          <CusWorkType/>
        </div>
        <div className='chartsBox'>
          <CusProvince/>
        </div>
      </div>
      
    </div>
  )
}
